// namespace: "Header" 
<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车确认" v-model="title" @keyup.enter="add" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "Header",
  props: {
    addTodo: {
      type: Function,
      required: true
    }
  },
  setup(props) {
    // 定义变量 存储任务名称
    const title = ref("");
    // 定义方法 添加TODO
    const add = () => {
      // title内容非空验证
      if (!title.value.trim()) return;
      const todo = {
        id: Date.now(),
        title: title.value,
        isChecked: false
      };
      // 添加完成 清空输入框
      props.addTodo(todo);
      title.value = "";
    };
    return { add, title };
  }
});
</script>
<style lang="scss" scoped>
.todo-header {
  padding-bottom: 10px;
  width: 100%;
  input {
    width: 100%;
    height: 35px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-indent: 10px;
    font-size: 14px;

    &:focus {
      outline: none;
      border-color: #a3d0fd;
    }
  }
}
</style>